<template>
  <div>
    <div class="res" v-for="(item,index) in shop" :key="index">
      <div @click="clickGo(item)">
        <img :src="'https://elm.cangdu.org/img/'+item.image_path" alt="" class="img1">
        <div class="name">
          <span class="goods">
            {{item.name}}
          </span>
          <span class="pay">
            支付
          </span>
          <p class="goods">月售{{item.float_minimum_order_amount}}单</p>
          <p class="goods">{{item.float_delivery_fee}}元起送/距离{{item.distance}}公里</p>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    props: ["shop"],
    created() {
      console.log(this.shop)
    },
    methods: {
      clickGo(item) {
        // http://localhost:8080/show?latitude=38.014801&longitude=112.44796&id=1
        let lat = item.latitude;
        let long = item.longitude;
        let id = item.id;
        this.$router.push({ name: 'ShowShopsL', query: { latitude: lat, longitude: long, id: id } })
      }
    },
  }
</script>
<style lang="less" scoped>
  .res {
    background-color: white;
    padding: 15px;
    width: 95%;
    height: 70px;
  }

  .img1 {
    float: left;
    width: 40px;
    height: 40px;
  }

  .name {
    float: left;
    margin-left: 10px;
  }

  .pay {
    border: 2px solid rgb(255, 96, 0);
    color: rgb(255, 96, 0);
    font-size: 12px;
  }

  .goods {
    margin-top: 6px;
    font-size: 13px;
    color: rgb(44, 44, 44);
  }
</style>